<template>
  <view class="sign">
    <sp-sign-board
      ref="signBoardRef"
      sid="sign-board"
      bgColor="#ffffff"
      :mark-text="markText"
      horizontal
      :penStyle="{ lineWidth: 4, color: '#66ccff' }"
      @reset="reset"
      @firstTouchStart="firstTouchStart"
    ></sp-sign-board>
  </view>
</template>

<script>
import SpSignBoard from '@/components/sp-sign-board/sp-sign-board.vue'
import {name} from '@/util/config'
export default {
  components: {
    SpSignBoard
  },
  data() {
    return {
      markText: ''
    }
  },
  onLoad() {
    // 生成水印内容
    this.refreshMark()
  },
  methods: {
    refreshMark() {
      const currentDate = new Date()
      const year = currentDate.getFullYear()
      const month = String(currentDate.getMonth() + 1).padStart(2, '0')
      const day = String(currentDate.getDate()).padStart(2, '0')
      const hours = String(currentDate.getHours()).padStart(2, '0')
      const minutes = String(currentDate.getMinutes()).padStart(2, '0')
      const seconds = String(currentDate.getSeconds()).padStart(2, '0')

      this.markText = [`${name}投票使用`]
    },
    firstTouchStart() {
      // 在第一次开始触碰时，更新一下时间水印，防止滞留时间太长造成时间误差（非必要）
      this.refreshMark()
      // 手动调用组件内绘制水印方法重新绘制
      this.$refs.signBoardRef.drawMark(this.markText)
    },
    reset() {
      this.refreshMark()
    }
  }
}
</script>

<style>
.sign {
  width: 100%;
  height: calc(100vh - 44px);
}
</style>
